<template>
  <div class="content-box">
    <!-- <TreeFilter
      label="name"
      title="部门列表(单选)"
      :request-api="getUserDepartment"
      :default-value="treeFilterValue.departmentId"
      @change="changeTreeFilter1"
    />
    <TreeFilter
      title="部门列表(多选)"
      multiple
      label="name"
      :request-api="getUserDepartment"
      :default-value="treeFilterValue1.departmentId"
      @change="changeTreeFilter2"
    /> -->
    <TreeFilter
      title="菜单列表"
      label="title"
      id="id"
      :data="menuData"
      :default-value="initParam.id"
      @change="changeTreeFilter"
      :rightMore="true"
      :guideline="true"
    >
      <template #filterHeader>
        <!-- 头部按钮插槽 -->
        <div class="flx-justify-between">
          <el-button type="primary" :icon="CirclePlus" @click="() => operateClick('addPage', {})">添加页面</el-button>
          <el-button type="primary" :icon="Refresh" @click="() => operateClick('refresh', {})">刷新</el-button>
        </div>
      </template>
      <template #treeItemRight="{ row }">
        <!-- 右侧菜单插槽 -->
        <el-dropdown>
          <el-icon title="更多"><MoreFilled /></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="() => operateClick('edit', row)">编辑</el-dropdown-item>
              <el-dropdown-item @click="() => operateClick('addSubLevel', row)">添加子级</el-dropdown-item>
              <el-dropdown-item @click="() => operateClick('delete', row)">删除</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </TreeFilter>
    <div class="descriptions-box card">
      <span class="text"> 树形筛选器 🍓🍇🍈🍉</span>
      <el-descriptions title="配置项 📚" :column="1" border>
        <el-descriptions-item label="requestApi"> 请求分类数据的 api </el-descriptions-item>
        <el-descriptions-item label="data"> 分类数据，如果有分类数据，则不会执行 api 请求 </el-descriptions-item>
        <el-descriptions-item label="title"> treeFilter 标题 </el-descriptions-item>
        <el-descriptions-item label="id"> 选择的id，默认为 “id” </el-descriptions-item>
        <el-descriptions-item label="label"> 显示的label，默认为 “label” </el-descriptions-item>
        <el-descriptions-item label="multiple"> 是否为多选，默认为 false </el-descriptions-item>
        <el-descriptions-item label="defaultValue"> 默认选中的值 </el-descriptions-item>
        <el-descriptions-item label="accordion"> 手风琴展开，默认为 false </el-descriptions-item>
        <el-descriptions-item label="defaultExpandAll"> 是否默认展开所有的子节点，默认为 false </el-descriptions-item>
        <el-descriptions-item label="rightMore"> 右边菜单按钮，默认为 false </el-descriptions-item>
        <el-descriptions-item label="guideline"> 助线是否开启，默认为 false </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup lang="ts" name="treeFilter">
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import TreeFilter from "@/components/TreeFilter/index.vue";
import { CirclePlus, Refresh, MoreFilled } from "@element-plus/icons-vue";
// const treeFilterValue = reactive({ departmentId: "1" });
// const changeTreeFilter1 = (val: string) => {
//   ElMessage.success(`你选择了 id 为 ${val} 的数据🤔`);
//   treeFilterValue.departmentId = val;
// };

// const treeFilterValue1 = reactive({ departmentId: ["11"] });
// const changeTreeFilter2 = (val: string[]) => {
//   ElMessage.success(`你选择了 id 为 ${JSON.stringify(val)} 的数据🤔`);
//   treeFilterValue1.departmentId = val;
// };

import { useAuthStore } from "@/stores/modules/auth";
const authStore = useAuthStore();
const menuData = ref(authStore.authMenuListnoMeta);
const getAuthMenuList = async () => {
  await authStore.getAuthMenuList();
};
// 树形筛选切换
const initParam = reactive({ id: 1 });
const changeTreeFilter = (val: number) => {
  ElMessage.success(`请注意查看请求参数变化 🤔${val}`);
  initParam.id = val;
  console.log(initParam.id);
};

// 操作
const actionHandlers = {
  addPage: row => {
    console.log("新增页面");
    ElMessage.success(`新增页面 🤔`);
  },
  refresh: row => {
    console.log("刷新树形列表");
    ElMessage.success(`刷新树形列表 🤔`);
    getAuthMenuList();
  },
  edit: row => {
    console.log("编辑", row);
    ElMessage.success(`编辑 🤔${row.id}`);
  },
  addSubLevel: row => {
    console.log("添加子级", row);
    ElMessage.success(`添加子级 🤔${row.id}`);
  },
  delete: row => {
    console.log("删除", row);
    ElMessage.success(`删除 🤔${row.id}`);
  }
};

const operateClick = (type: string, row: object) => {
  const actionHandler = actionHandlers[type];
  if (actionHandler) {
    actionHandler(row);
  }
};
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
